import { Component, Input, OnInit } from '@angular/core';
import { CITY } from "../../../mock/mock-city";
import { of } from "rxjs/internal/observable/of";

@Component({
  selector: 'meta-chart-map',
  styleUrls: ['./meta-chart-map.component.styl'],
  template: `
    <abm-map echarts [options]="option" (ready)="onReady($event)" (chartInit)="onChartInit($event)"></abm-map>
  `
})
export class MetaChartMapComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
    this.getCity();
  }

  @Input() title: string = '全国测评企业布局';
  @Input() center = [104.114129, 37.550339];
  @Input() zoom: number = 5;
  @Input() data = [];
  @Input() citySource: string = '1'; // 省市维度默认从CITY中获取，2时从传入的data中获取

  geoCoordMap = {};
  option = {};
  echartsIntance;
  map;

  onChartInit(ec) {
    this.echartsIntance = ec;
  }

  onReady(map: any) {
    this.map = map;
    this.setOption();
  }

  setData(data) {
    this.data = data;
  }

  setOption() {
    if (this.echartsIntance && this.map) {
      this.map.addControl(this.echartsIntance);
      this.echartsIntance.setOption(this.getOption(), true);
    } else {
      let _this = this;
      setTimeout(function () {
        _this.setOption();
      }, 100);
    }
  }

  // 经纬度数据
  private getCity() {
    return of(CITY).subscribe(res => this.geoCoordMap = res);
  }

  private convertData(data) {
    let res = [];
    if (this.citySource == '2') {
      for (let i = 0; i < data.length; i++) {
        res.push({
          name: data[i].name,
          value: [data[i].log, data[i].lat, data[i].value]
        });
      }
    } else {
      for (let i = 0; i < data.length; i++) {
        let geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
    }
    return res;
  };

  private getOption() {
    return {
      title: {
        text: this.title,
        textStyle: {
          color: '#fff'
        },
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: function (val) {
          return val.name + '<br>' + val.value[2] + '个项目';
        }
      },
      bmap: {
        center: this.center,
        zoom: this.zoom,
        roam: true,
        mapStyle: {
          features: ["road", "building", "water", "land"],//隐藏地图上的"poi",
          style: "dark",
        }
      },
      series: [
        {
          name: 'pm2.5',
          type: 'scatter',//散点类型
          coordinateSystem: 'bmap',
          data: this.convertData(this.data),
          symbolSize: function (val) {
            return Math.pow(val[2], 1 / 5) * 10;
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false
            },
            emphasis: {// 对应的鼠标悬浮效果
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: '#08CCB2',
            }
          },
          animation: false
        },
        {
          name: 'Top 5',
          type: 'effectScatter',//散点气泡图
          coordinateSystem: 'bmap',
          data: this.convertData(this.data.sort(function (a, b) {
            return b.value - a.value;
          }).slice(0, 5)),//按照值的大小排序，并选择前五项
          symbolSize: function (val) {
            return Math.pow(val[2], 1 / 5) * 10;
          },
          showEffectOn: 'render',//配置何时显示特效。
          rippleEffect: {
            brushType: 'stroke'//涟漪特效相关配置。
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: '#08CCB2',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          animation: false,
          zlevel: 1
        }
      ]
    };
  }

}
